<template>
    <div class="photoinfo-container">
        <h3>{{info.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{info.add_time | dateFormat()}}</span>
            <span>点击：{{info.click}}次</span>

        </p>
        <hr>
        <!--缩略图区域-->
        <div class="thumbs">
            <vue-preview :slides="list" @close="closeHandler"></vue-preview></div>
            <!--图片内容区域-->
        <div class="content">{{info.describe}}</div>
        <!--放置评论子组件-->
        <cmt-box v-bind:parent-id="id"></cmt-box>
    </div>

</template>

<script>
    import comment from '../subcomponents/comment.vue'
    export default {
        name: "photo-info",
        data(){
            return{
                id:this.$route.params.id,
                info:{},
                list: [
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        w: 600,
                        h: 600
                    },
                    {
                        src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                        msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                        w: 600,
                        h:600
                    },
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        w: 600,
                        h: 600
                    }
                ]
            }
        },
        components:{
            'cmt-box':comment
        },
        created(){
          this.getPhotoInfo()
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('http://192.168.1.237:9090/test33/test.php').then(result=>{
                    if(result.body.code===0){
                        result.body.imgInfo.forEach(item=>{
                            if(this.id==item.id){
                                this.info=item
                            }
                        })

                    }
                })
            },
            // 即将关闭的时候，调用这个处理函数
            closeHandler() {
                console.log('closeHandler')
            },
            // 完全关闭之后，调用这个函数清理资源
            destroyHandler() {
                console.log('destroyHandler')
            }
        }
    }
</script>

<style scoped lang="scss">
.photoinfo-container{
    padding: 3px;
    h3{
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }

}
</style>